<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色管理 - 权限管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .role-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }
        .menu-badge {
            background: #e8f5e8;
            color: #2e7d32;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            margin: 2px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container py-5">
    <!-- 头部 -->
    <div class="text-center text-white mb-5">
        <h1 class="display-4 fw-bold"><i class="fas fa-shield-alt me-3"></i>角色权限管理</h1>
        <p class="lead">查看角色详情和对应的菜单权限</p>
    </div>

    <!-- 角色查询 -->
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title"><i class="fas fa-search me-2"></i>角色查询</h5>
            <div class="row g-3 align-items-end">
                <div class="col-md-6">
                    <label class="form-label">角色ID</label>
                    <input type="number" class="form-control" id="roleId" placeholder="输入角色ID" value="1">
                </div>
                <div class="col-md-6">
                    <button class="btn btn-primary w-100" onclick="loadRoleDetail()">
                        <i class="fas fa-eye me-2"></i>查看角色详情
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 角色详情 -->
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title"><i class="fas fa-info-circle me-2"></i>角色详情</h5>
            <div id="roleDetail" class="text-center py-4">
                <div class="text-muted">
                    <i class="fas fa-shield-alt fa-3x mb-3"></i>
                    <p>请输入角色ID查看详情</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 所有角色列表 -->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title"><i class="fas fa-list me-2"></i>所有角色</h5>
            <button class="btn btn-outline-primary mb-3" onclick="loadAllRoles()">
                <i class="fas fa-sync me-2"></i>加载所有角色
            </button>
            <div id="roleList" class="text-center py-4">
                <div class="text-muted">
                    <i class="fas fa-shield-alt fa-3x mb-3"></i>
                    <p>点击按钮加载角色列表</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 获取上下文路径
    function getContextPath() {
        return window.location.pathname.split('/')[1] || '';
    }

    // 加载角色详情
    async function loadRoleDetail() {
        const roleId = document.getElementById('roleId').value;
        const contextPath = getContextPath();

        if (!roleId) {
            alert('请输入角色ID');
            return;
        }

        try {
            const response = await fetch(`/${contextPath}/api/roles/${roleId}`);
            const result = await response.json();

            if (result.success && result.data) {
                displayRoleDetail(result.data);
            } else {
                document.getElementById('roleDetail').innerHTML = `
                        <div class="text-center text-danger">
                            <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
                            <p>角色不存在或查询失败: ${result.message}</p>
                        </div>
                    `;
            }
        } catch (error) {
            console.error('查询角色详情错误:', error);
            document.getElementById('roleDetail').innerHTML = `
                    <div class="text-center text-danger">
                        <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
                        <p>查询过程中发生错误</p>
                    </div>
                `;
        }
    }

    // 显示角色详情
    function displayRoleDetail(role) {
        const menusHtml = role.menus && role.menus.length > 0
            ? role.menus.map(menu =>
                `<span class="menu-badge">
                        <i class="fas fa-${getMenuIcon(menu.type)} me-1"></i>${menu.name}
                    </span>`
            ).join('')
            : '<span class="text-muted">无菜单权限</span>';

        document.getElementById('roleDetail').innerHTML = `
                <div class="row">
                    <div class="col-md-4 text-center">
                        <div class="role-icon mx-auto mb-3">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h4>${role.name}</h4>
                        <p class="text-muted">${role.description || '暂无描述'}</p>
                        <span class="badge bg-success">
                            <i class="fas fa-check me-1"></i>正常
                        </span>
                    </div>
                    <div class="col-md-8">
                        <h5><i class="fas fa-list me-2"></i>菜单权限</h5>
                        <div class="mb-3">${menusHtml}</div>

                        <h5 class="mt-4"><i class="fas fa-chart-bar me-2"></i>权限统计</h5>
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="border rounded p-3">
                                    <h3 class="text-primary">${role.menus ? role.menus.length : 0}</h3>
                                    <small class="text-muted">菜单数量</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="border rounded p-3">
                                    <h3 class="text-success">${role.menus ? role.menus.filter(m => m.type === 0).length : 0}</h3>
                                    <small class="text-muted">一级菜单</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="border rounded p-3">
                                    <h3 class="text-info">${role.menus ? role.menus.filter(m => m.type === 1).length : 0}</h3>
                                    <small class="text-muted">功能菜单</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
    }

    // 加载所有角色
    async function loadAllRoles() {
        const contextPath = getContextPath();

        try {
            const response = await fetch(`/${contextPath}/api/roles?page=1&pageSize=10`);
            const result = await response.json();

            if (result.success) {
                displayRoleList(result.data);
            } else {
                alert('加载角色列表失败: ' + result.message);
            }
        } catch (error) {
            console.error('加载角色列表错误:', error);
            alert('加载过程中发生错误');
        }
    }

    // 显示角色列表
    function displayRoleList(roles) {
        if (!roles || roles.length === 0) {
            document.getElementById('roleList').innerHTML = `
                    <div class="text-center text-muted">
                        <i class="fas fa-shield-alt fa-3x mb-3"></i>
                        <p>没有找到角色数据</p>
                    </div>
                `;
            return;
        }

        const rolesHtml = roles.map(role => {
            const menuCount = role.menus ? role.menus.length : 0;

            return `
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-2 text-center">
                                    <div class="role-icon mx-auto">
                                        <i class="fas fa-shield-alt"></i>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mb-1">${role.name}</h5>
                                    <p class="text-muted mb-1">${role.description || '暂无描述'}</p>
                                    <small class="text-muted">
                                        <i class="fas fa-list me-1"></i>${menuCount} 个菜单权限
                                    </small>
                                </div>
                                <div class="col-md-4 text-end">
                                    <button class="btn btn-sm btn-outline-primary me-2" onclick="viewRole(${role.id})">
                                        <i class="fas fa-eye me-1"></i>查看
                                    </button>
                                    <button class="btn btn-sm btn-outline-success" onclick="setRoleId(${role.id})">
                                        <i class="fas fa-edit me-1"></i>编辑
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
        }).join('');

        document.getElementById('roleList').innerHTML = rolesHtml;
    }

    // 辅助函数
    function getMenuIcon(type) {
        const icons = ['folder', 'file', 'cog', 'user', 'chart-bar'];
        return icons[type] || 'file';
    }

    function viewRole(roleId) {
        document.getElementById('roleId').value = roleId;
        loadRoleDetail();
    }

    function setRoleId(roleId) {
        document.getElementById('roleId').value = roleId;
    }

    // 页面加载时自动加载角色1的详情
    document.addEventListener('DOMContentLoaded', function() {
        loadRoleDetail();
    });
</script>
</body>
</html>
